<template>
  <div  class="filter-bar-query">
    <el-row class="row">
      <el-col :span="1">
        <el-button size="small" type="primary" @click="Go('create')" class="el-icon-plus"> 新建策略</el-button>
      </el-col>
      <el-col :span="4" :offset="19">
        <el-input class="search-box" placeholder="搜索" icon="search" size="small" v-model="search" @keyup.enter.native="searchStrategyName"  @click="searchStrategyName"></el-input>
        <!--<el-input size="small" v-model="search" placeholder="请输入" @keyup.enter.native="searchStrategyName"></el-input>-->
      </el-col>
      <!--<el-col :span="1" style="text-align: center">
        <el-button size="small" type="primary" @click="searchStrategyName">搜索</el-button>
      </el-col>-->
    </el-row>
    <template>

    <div style="margin-top:10px;">
    <el-table :data="data.data">
      <!--<el-table-column prop="strategyCode" label="编号"></el-table-column>
      <el-table-column prop="type" label="实例">
        <template scope="scope">
          {{scope.row.type === 0 ? '系统' : '探针'}}
        </template>
      </el-table-column>-->
      <el-table-column prop="strategyName" label="策略名称"></el-table-column>
      <!-- <el-table-column prop="level" label="告警级别">
        <template scope="scope">
          <span v-if="scope.row.level == 1">一级</span>
          <span v-else-if="scope.row.level == 2">二级</span>
          <span v-else-if="scope.row.level == 3">三级</span>
          <span v-else-if="scope.row.level == 4">四级</span>
          <span v-else-if="scope.row.level == 5">五级</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="strategyDesc" label="策略描述"></el-table-column>
      <el-table-column prop="action" label="操作">
        <template scope="scope">
          <!--<router-link :to="'/strategy/edit?id=' + scope.row.strategyCode">
            <span class="action list-edit">编辑</span>
          </router-link>-->
          <router-link :to="'/strategy/edit-strategy?id=' + scope.row.strategyCode">
            <span class="action list-edit">编辑</span>
          </router-link>
          <span class="action list-del" @click="delStrategyByCode(scope.row.strategyCode)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row v-if="data.total > 10">
      <el-col class="record-pagination">
        <el-pagination
          class="pagination"
          @current-change="recordCurrentChange"
          :current-page.sync="recordPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="data.total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="delStrategyVisible"
      size="tiny">
      <span>确定要删除该策略吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="delStrategyVisible = false">取 消</el-button>
        <el-button size="small" type="primary" :loading="delDisabled" @click="delStrategySubmit">{{ delDisabled ? '' : '确 定' }}</el-button>
      </span>
    </el-dialog>
    </div>
    </template>
  </div>
</template>
<script>
  import { Table, TableColumn, Row, Col, Button, Pagination, Input, Dialog, Message} from 'element-ui'
  export default {
    data () {
      return {
        data: [],
        recordPage: 1,
        search: '',
        delStrategyVisible: false,
        id: '',
        delDisabled: false
      }
    },
    watch: {
      search (v) {
        if (!v) {
          this._initStrategyList()
        }
      }
    },
    created () {
      this._initStrategyList()
    },
    methods: {
      recordCurrentChange (v) {
        this.data = []
        this.recordPage = v
        this._initStrategyList()
      },
      Go (path) {
        this.$router.push(path)
      },
      async delStrategyByCode (id) {
        this.delStrategyVisible = true
        this.id = id
      },
      async delStrategySubmit () {
        this.delDisabled = true
        var data = await this.api.delStrategyByCode({data: {strategyCode: this.id}})
        if (data.code == 1) {
          Message(data.msg)
        }
        this.delStrategyVisible = false
        this._initStrategyList()
        this.delDisabled = false
      },
      async _initStrategyList () {
        var data = {
          size: 10,
          page: this.recordPage
        }
        if (this.search) {
          data.name = this.search
        }
        this.data = await this.api.searchStrategyName({data: data})
      },
      async searchStrategyName () {
        if (!this.search) {
          return
        }
        var data = {
          size: 20,
          page: this.recordPage,
          name: this.search
        }
        this.data = await this.api.searchStrategyName({data: data})
      }
    },
    components: {
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-row': Row,
      'el-col': Col,
      'el-button': Button,
      'el-pagination': Pagination,
      'el-input': Input,
      'el-dialog': Dialog
    }
  }
</script>
<style scoped>
  .row {
    height: 40px;
  }
  .action {
    cursor: pointer;
  }
  .list-edit {
    margin-right: 8px;
    color: #50bfff;
  }
  .list-del {
    color: #ff4949;
  }
  .record-pagination {
    margin-top: 10px;
    text-align: right;
  }
  .pagination {
    padding-right: 0!important;
  }
  .filter-bar-query{
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
  }
  .main-content{
    padding: 0!important
  }
</style>

